import React from 'react';
import { Layout, Button, Space } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';

import { useDispatch, history } from 'umi';

// interface PropsType {
//   onOpen: () => void;
// }

export default () => {
  const dispatch = useDispatch();

  // 退出事件
  const exit = () => {
    history.push('/login');
    localStorage.clear();
  };

  const adminname = localStorage.getItem('adminname') || '';

  return (
    <Layout.Header
      style={{
        padding: '0 20px',
        background: '#fff',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      {React.createElement(1 ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        // onClick: props.onOpen,
        onClick: () => dispatch({ type: 'index/changeCollapsed' }),
      })}
      <Space>
        <span>欢迎你，{adminname}</span>
        <Button onClick={exit}>退出</Button>
      </Space>
    </Layout.Header>
  );
};
